<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>消息</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/aliyun.css">
		<link rel="stylesheet" href="css/style.css">
		<style>
			[v-cloak] {display: none;}
			li{width: 94%;padding: 10px 15px 1px;position: relative;margin: 10px auto 10px;box-shadow: 1px 1px 3px 1px #eee;border-radius: 10px;}
			li p{line-height: 18px !important;font-size: 15px;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;}
			li p span{float: right;margin-right: 15px;}
			li i{position: absolute;right: 5px;top: 24px;color: #007AFF;font-size: 20px !important;}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div id="mask"></div>
			<header id="header" class="mui-bar mui-bar-nav">
				<h1 class="mui-title">系统消息</h1>
			</header>
			
				
				<ul>
					<li v-for="(index,o) in message" @click="get_info(o,index)">
						<p>系统消息： <span>{{o.topicDate}}</span></p>
						<i class="iconfont icon-jiantouyou"></i>
						<p style="padding-right: 60px;position: relative;">{{o.topicContent}}<span style="position: absolute;right: 5px;top: 0;color: red;" v-if="o.topicState == 1">new!</span></p>
					</li>
				</ul>
				<!-- <p style="line-height: 100px;text-align: center;font-size: 16px;">暂无考勤统计</p> -->
			
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-3.1.0.js"></script>
	<script src="js/base.js"></script>
	<script src="../js/vue.min.js"></script>
	<script src="js/tools.js"></script>
	<script src="../js/vue-resource.js"></script>
	<script>
		window.onload = function() {
			//设置子页面高度
			var phone_height = screen.height;
			
			mui.init({
				pullRefresh: {
					container: "#app", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#1E90FF', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '60px', //可选,默认50px.下拉刷新控件的高度,
						range: '120px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '45px', //可选 默认0px,下拉刷新控件的起始位置
						auto: false, //可选,默认false.首次加载自动上拉刷新一次 
						callback: function() {
							window.location.reload();
							mui.toast("刷新成功");
						} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}

			function plusReady() {
				var token = localStorage.getItem("token");
				var app = new Vue({
					el: "#app",
					data: {
						token: localStorage.getItem("token"),
						user_id:"",
						message:[],
					},
					methods: {
						get_message:function(){
							this.$http.post(TOOL.Host + "sysTopicController/querySysTopicByUserId", {
									data: JSON.stringify({
										userId:this.user_id,
									})
								}, {
									emulateJSON: true,
									headers: {
										'sourceType': "APP"
									}
								})
								.then(function(res) {
									if(res.data.code == 0){
										this.message = res.data.data; 
									}else{
										mui.toast(res.data.mgs)
									}
								}, function(res) {
									console.log(res)
								});
						},
						get_info:function(data,index){
							this.message[index].topicState=2;
							mui.openWindow({
								url:"message_info.html",
								id:"html/message_info.html",
								extras:data
							})
						}
					},
					created: function() {
						this.user_id=localStorage.getItem("user_id");
						this.get_message();
					}
				})

			}
		}
	</script>
</html>
